<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            margin: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">

        <form>
            <div>
                <label for="username">账号</label>
                <input id="username" type="text" name="username">
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password" id="password" name="password">
            </div>
            <div class="submit">
            <input type="button" value="注册" onclick="post()">
            </div>
        </form>

    </div>
</body>
</html>

<script>

    const url = "http://127.0.0.1:3030/api/register";

    function post() {

        let username = document.querySelector('#username').value;
        let password = document.querySelector('#password').value;
        const xhr = new XMLHttpRequest();
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(`username=${username}&password=${password}`);
        xhr.onload = dealchange;

        function dealchange() {
            if( xhr.readyState==4&&xhr.status==200 ) {
                console.log(xhr.responseText);
            } else {
                console.log({
                    message: '发生请求错误',
                    status: xhr.status
                })
            }
        }
    }


</script>